<template>
  <div class="order_content">
    <div class="title van-hairline--bottom">报修单号: {{orderContent.servicesNo}}</div>
    <div class="content van-hairline--bottom">
      <article>{{orderContent.content}}</article>
    </div>
    <div class="content_footer">
      <span>预约上门时间：</span>
      <span>{{orderContent.appointDatestr | filterText}}</span>
    </div>
    <div class="content_footer">
      <span>地址：</span>
      <span>{{orderContent.houseName | filterText}}</span>
    </div>
    <div class="content_footer">
      <span>电话：</span>
      <span>{{orderContent.contactPhone | filterText}}</span>
    </div>
  </div>
</template>

<script>
export default {
  name: "OrderInfo",
  props: {
    orderContent: {
      type: Object
    }
  },
  filters: {
    filterText(text) {
      if (!text) {
        return "未填写";
      }
      return text;
    }
  }
};
</script>

<style lang="less" scoped>
.order_content {
  background-color: #fff;
  .title {
    padding: 10px 10px;
    // padding-bottom: 0;
    font-size: 14px;
  }
  article {
    padding: 10px 15px;
    font-size: 13px;
    color: @default-dark;
    line-height: 18px;
  }
  .content_footer {
    padding: 4px 15px;
    font-size: 14px;
  }
  .content_footer:last-of-type {
    padding-bottom: 10px;
    // margin-bottom: 50px;
  }
}
</style>